<template>
  <div class="wrapper">
    <img src="../../assets/logo-bg.jpg" width="100%"/>
    <div>
      <div class="login-wrap" v-show="showLogin">
        <p v-show="showTishi">{{ tishi }}</p>
        <div class="txtWrapper">
          <div class="imgwrapper"><img src="../../assets/model.png" width="100%"/></div>
          <input class="input" type="text" v-model="userName" placeholder="请输入用户名"/>
        </div>
        <div class="txtWrapper">
          <div class="imgwrapper"><img src="../../assets/password.png" width="100%"/></div>
          <input class="input" type="password" v-model="password" placeholder="请输入6-16位密码"/>
        </div>
        <div class="txtWrapper">
          <div class="imgwrapper"><img src="../../assets/code.png" width="100%"/></div>
          <input class="input" type="text" width="40px" v-model="verifyCode" placeholder="请输入验证码"/>
          <img :src="verifyurl" width="100px" height="40px" v-on:click="sendSms()">
        </div>
        <button class="button4" v-on:click="login">登 录</button>
        <div class="desc">
          <span v-on:click="ToLoginMobile">手机号登录</span>
          <span v-on:click="ToRegister">注册</span>
        </div>
      </div>
      <div class="login-wrap" v-show="showLoginMobile">
        <!--<h3>登录</h3>-->
        <p v-show="showTishi">{{ tishi }}</p>
        <div class="txtWrapper">
          <div class="imgwrapper"><img src="../../assets/model.png" width="100%"/></div>
          <input class="input" type="text" v-model="mobile" placeholder="请输入手机号"/>
        </div>
        <div class="txtWrapper">
          <div class="imgwrapper"><img src="../../assets/code.png" width="100%"/></div>
          <input class="input" type="text" placeholder="请输入验证码" v-model="verifyCodeSms">


          <!--超时发送-->
          <span v-show="sends" v-on:click="gets">
            	<button class="btnCode" v-on:click="sendMobileSms()">发送验证码</button>
          </span>
          <span v-show="!sends">{{ stime }}秒后重新发送</span>

        </div>
        <button class="button4" v-on:click="loginMobile">登录</button>
        <div class="desc">
          <span v-on:click="ToRegister">没有账号，马上注册</span>
          <span v-on:click="ToLogin">登录</span>

        </div>
      </div>

      <div class="login-wrap" v-show="showRegister">
        <!--<h3>注册</h3>-->
        <p v-show="showTishi">{{ tishi }}</p>
        <div class="txtWrapper">
          <div class="imgwrapper"><img src="../../assets/model.png" width="100%"/></div>
          <input type="text" class="input" placeholder="请输入用户名" v-model="userName">
        </div>
        <div class="txtWrapper">
          <div class="imgwrapper"><img src="../../assets/password.png" width="100%"/></div>
          <input type="password" class="input" placeholder="请输入6-16位密码" v-model="password1">
        </div>
        <div class="txtWrapper">
          <div class="imgwrapper"><img src="../../assets/password.png" width="100%"/></div>
          <input type="password" class="input" placeholder="请再次输入密码" v-model="password2">
        </div>
        <div class="txtWrapper">
          <div class="imgwrapper"><img src="../../assets/code.png" width="100%"/></div>
          <input type="text" class="input" placeholder="请输入校验码" v-model="verifyCode">
          <img :src="verifyurl" width="100px" height="40px" v-on:click="sendSms()">
        </div>

        <button class="button4" v-on:click="register">注 册</button>
        <div class="desc">
          <span v-on:click="ToLogin">已有账号？马上登录</span>
        </div>
      </div>

    </div>
  </div>

</template>
<script>
import {setCookie, getCookie} from '../../assets/js/cookie.js'
import {nemoMD5} from "../../assets/js/md5.js"
import qs from "qs";

export default {
  data() {
    return {
      //超时重新发送
      stime: 0,
      sends: true,


      // 生成的验证码
      verify: '',
      // 用户名
      userName: '',
      // 用户填写的验证码
      verifyCode: '',
      // 验证码路径
      verifyurl: '',
      // 手机下发验证码
      verifyCodeSms: '',
      // 手机号
      mobile: '',
      // 登录页密码输入框
      password: '',
      // 注册页密码1
      password1: '',
      // 注册页密码2
      password2: '',
      // 提示信息
      tishi: '',
      // 控制提示信息显示隐藏
      showTishi: false,
      // 控制登录输入框显示隐藏
      showLogin: true,
      // 控制注册输入框显示隐藏
      showRegister: false,
      // 控制手机登录输入框显示隐藏
      showLoginMobile: false
    }
  },
  methods: {
    //超时重新发送
    gets() {
      this.sends = false;
      //超时时间
      this.stime = 60;
      var timer = setInterval(() => {
        this.stime--;
        if (this.stime <= 0) {
          this.sends = true;
          clearInterval(timer)
        }
      }, 1000);
    },

    //验证码 图片
    sendSms() {
      var code = ['q', 'w', 'e', 'r', 't', 'y', 'u', 'p', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '1', '2', '3', '4', '5', '6', '7', '8', '9']
      var url = "http://www.webxml.com.cn/WebServices/ValidateCodeWebService.asmx/enValidateImage?byString=";
      this.verify = code[Math.floor(Math.random() * 32)] + code[Math.floor(Math.random() * 32)] + code[Math.floor(Math.random() * 32)] + code[Math.floor(Math.random() * 32)];
      console.log(this.verify)
      this.verifyurl = url + this.verify;
    },

    // 清空数据
    clear() {
      this.userName = '';
      this.password = '';
      this.verifyCode = '';
      this.password1 = '';
      this.password2 = '';
      this.verifyCode = '';
      this.verifyCodeSms = '';
      this.tishi = '';
      this.sendSms();
    },

    // 重定向到登录页面
    ToLogin() {
      this.showRegister = false
      this.showLoginMobile = false
      this.showLogin = true
      this.clear()
    },

    // 用户登录
    login() {
      var that = this;
      if (that.userName == "" || this.password == "" || this.verifyCode == "") {
        alert("用户名密码验证码不能为空")
      } else if (!(this.verifyCode === this.verify)) {
        alert('验证码错误！')
        this.verifyCode = ''
      } else {
        let passwd = nemoMD5(this.password);
        this.axios.post("user", qs.stringify({
          username: that.userName,
          password: passwd
        })).then((res) => {
          let data = res.data;
          if (data.code == 1) {
            this.showTishi = true;
            this.tishi = data.msg
            setCookie('userName', this.userName, 1000 * 60);
            setCookie('uid', data.uid, 1000 * 60);
            this.$router.push('/Words')
          } else if (data.code == 0) {
            alert(data.msg)
            that.userName = ''
            that.password = ''
          } else {
            alert(data.msg);
            that.password = ''
          }
          that.verifyCode = ''
        }).catch(err=>{
          alert(err)
          console.log(err)
        });
      }
      that.sendSms()
    },

    //重定向到注册页面
    ToRegister() {
      this.showRegister = true;
      this.showLogin = false;
      this.showLoginMobile = false;
      this.clear()
    },

    // 用户注册
    register() {
      var that = this
      if (this.userName == "" || this.password1 == "" || this.verifyCode == "") {
        alert("请输入用户名或密码或校验码")
      } else if (this.password1 != this.password2) {
        alert("两次密码不一致")
        this.password1 = ''
        this.password2 = ''
      } else {
        //验证用户名是否存在
        this.axios.post("user",qs.stringify({
          username: that.userName,
          password: '123'
        })).then((res) => {
          //检查用户是否已经存在
          let json = res.data
          if (json.code !== 0) {
            alert('用户名已经存在')
            this.userName = ''
            this.password1 = ''
            this.password2 = ''
            this.verifyCode = ''
            return;
          } else {
            // 用户名不存在，继续注册
            let passwd = nemoMD5(this.password1);
            this.axios.post("register", qs.stringify({
              username: this.userName,
              password: passwd
            })).then((res) => {
              let flag = JSON.parse(res.data)
              if (flag) {
                alert('注册成功')
                this.ToLogin();
              } else {
                alert('注册失败，请重试！')
                that.ToRegister()
              }
            })
          }
        })
      }
      that.sendSms()
    },

    // 重定向到手机登录
    ToLoginMobile() {
      this.showRegister = false
      this.showLoginMobile = true
      this.showLogin = false
      this.clear()
    },

    // 点击发送验证码
    sendMobileSms() {
      var url = "http://www.h5peixun.com/soya/apps/testdb/server/?action=user.sendVerifySms&mobile=" + this.mobile
      this.axios.get(url)
      event.preventDefault()
    },

    loginMobile() {
      if (this.mobile == "") {
        alert("请输入手机号码")
      } else {
        var url = 'http://www.h5peixun.com/soya/apps/testdb/server/?action=user.loginByMobile'
        this.$http.jsonp(url, {params: {mobile: this.mobile, verifyCodeSms: this.verifyCodeSms}}).then((res) => {
          console.log(res.data.ret)
          console.log(res.data.msg)
          if (res.data.ret == 0) {

            this.showTishi = true
            this.tishi = "登录成功"
            setCookie('userName', this.mobile, 1000 * 60)
            this.$router.push('/Words')
          }
        })
      }
      this.clear()
    },

  },
  mounted() {
    this.sendSms();
  }
}
</script>

<style scoped>
.wrapper {
  background: #ffffff;
  height: 100%;
}

.login-wrap {
  text-align: center;
  padding-top: 46px;
  width: 100%;
}

.txtWrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px #eee solid;
  margin: 0 38px;
  padding-bottom: 12px;
  margin-bottom: 29px;
}

.desc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px 38px;
  font-size: 14px;
  color: #999999;
}

.imgwrapper {
  flex: 0 0 18px;
}

.input {
  display: block;
  outline: none;
  border: 0;
  box-sizing: border-box;
  margin-left: 10px;
  font-size: 16px;

}

.button4 {
  display: block;
  width: calc(100% - 76px);
  height: 50px;
  line-height: 50px;
  margin: 0 38px;
  margin-top: calc(100px - 29px);
  border: none;
  background-color: #41b883;
  color: #fff;
  font-size: 18px;
  border-radius: 25px;
}

.btnCode {
  background-color: #41b883;
  color: #ffffff;
  border: 0;
  border-radius: 3px;
  height: 28px;
  line-height: 28px;
}

span {
  cursor: pointer;
}

span:hover {
  color: #41b883;
}
</style>
